<!--  -->
<template>
  <div :class="className">
    <div v-html="css"></div>
    <div class='alliance-page'>
      <div  class="subplatform-pane">
        <div class="subplatform-box" v-if="platformDataList.length > 0">
          <div :class="check_platform == item.platform ? 'name-pane active-border-color' : 'name-pane'" @click="subplatformTo(item.activity_id)" v-for="(item,index) in platformDataList">
            <div class="bg-img" :style="{'background-image': `url(${item.pic})`}" v-if="item.pic"></div>
            <div class="subplatform-title">
              <span 
                class="tip-name" 
                v-if="datas.tap_isShow" 
                :class="[item.platform == 'didi'?'tip-didi':item.platform == 'meituan'?'tip-meituan':item.platform == 'eleme'?'tip-eleme':'']">{{item.platform_name}}</span>
              <span class="name">{{item.name}}</span>
            </div>
          </div>
        </div>
        <van-empty description="暂无数据" v-else/>
        <div class="loadMore" v-if="isLoadMore" @click="getMoreData">加载更多</div>
        <div class="loadMore" v-if="isLoadMoreSet" @click="getMoreDataAll">加载更多</div>
        <div class="loadMore" v-if="lastIndex == index && (page >= total_page)">{{ $i18n.t("没有更多了") }}~~</div>
      </div>
    </div>
  </div>
  
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
const css = function() {
  if (this.datas.preview_color) {
    // 确保数据已传入
    let datas = this.plugin_active && this.openTemplate == 1 ? this.datas_style02 : this.datas;
    const { preview_color,active_title_color,tap_bg_color,tap_color} = datas;
    const {didi_bg,element_bg,meituan_bg} = tap_bg_color;
    const {didi_color,element_color,meituan_color} = tap_color;
    console.log(tap_bg_color);
    return `
        .component-${this.id} .subplatform-pane {
            background: ${preview_color};
        }
        .component-${this.id} .subplatform-pane .subplatform-box .name-pane .tip-didi {
          background: ${didi_bg};
          color:${didi_color};
        }
        .component-${this.id} .subplatform-pane .subplatform-box .name-pane .tip-meituan {
          background: ${meituan_bg};
          color:${meituan_color};
        }
        .component-${this.id} .subplatform-pane .subplatform-box .name-pane .tip-eleme {
          background: ${element_bg};
          color:${element_color};
        }
        .component-${this.id} .subplatform-pane .subplatform-box .name-pane .name {
          color:${active_title_color};
        }
    `;
  }
};
export default {
  name:'',
  //import引入的组件需要注入到对象中才能使用
  props: ["id","page_id", "datas","lastIndex","index","component_key","isBottom","tabcontrol", "isLast"],
  components: {},
  data() {
    return {
      page:1,
      per_page:15, //每页多少条数据
      arrIndex: 1, //组件加载下一页
      storeScroll:'',
      isLoadMore: true,
      isLoadMoreSet:false,
      allLoaded: false, //全部数据加载完成
      total_page:0,
      locationMore:true,
      allianceUnList:[]
    };
  },
  //监听属性 类似于data概念
  computed: {
    css() {
      return "<style>" + css.call(this) + "</style>";
    },
    className() {
      const name = ["component-wrapper", `component-${this.id}`];
      return name;
    },
    platformDataList() {
      return this.datas.list.data || this.datas.list;
    }
  },
  //监控data中的数据变化
  watch: {
    isBottom: function(newVal, oldVal) {
      if (this.tabcontrol) {
        // 选项卡this.isLast判断商品列表是最后一个组件
        if (newVal && this.isLast && this.isLoadMore) {
          this.getMoreData();
        } else if (this.page >= this.total_page) {
          this.getMoreDataAll();
        }
      }
      // this.lastIndex == this.index判断商品列表是最后一个组件
      if (newVal && this.lastIndex == this.index && this.isLoadMore) {
        this.getMoreData();
      } else if (this.page >= this.total_page) {
        this.getMoreDataAll();
      }
    }
  },
  //方法集合
  methods: {
    subplatformTo(activityId) {
      this.$router.push(this.fun.getUrl('unionCpsTransfer', {},{activ:activityId}));
    },
    getMoreDataAll() { //处理后台一次性给多量数据分页
      if (this.allianceUnList.slice(0,this.per_page * this.arrIndex).length > 0) {
        this.datas.list = this.datas.list.concat(this.allianceUnList.slice(this.per_page * this.arrIndex, this.per_page * (this.arrIndex + 1))); //数组拼接
        this.arrIndex = this.arrIndex + 1;
        if(this.allianceUnList.length === this.datas.list.length) {
          this.isLoadMoreSet = false;
        }
      }
    },
    setListData() { //处理列表数据是自动获取还是手动获取
      if(this.datas?.list?.data && this.datas.get_style == "1") {
        this.total_page = this.datas.list.last_page;
        if(this.total_page <= this.page) {
          this.isLoadMore = false;
        }
        if(this.datas.list.data.length > this.datas.get_number) { //大于后台控制的数量就显示后台数量列表
          this.datas.list.data.splice(this.datas.get_number,this.datas.list.data.length-this.datas.get_number);
          this.isLoadMore = false;
        }
      }else {
        if(this.datas.list.length <= 0) {
          this.isLoadMore = false;
        }
      }
      if(this.datas.get_style == "2") {
        this.allianceUnList = this.datas.list;
        this.datas.list = this.datas.list.slice(0, 15);
        this.isLoadMore = false;
        if(this.allianceUnList.length > this.per_page) {
          this.isLoadMoreSet = true;
        }
      }
    },
    // 获取更多数据
    getMoreData() {
      this.isLoadMore = false;
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page = this.page + 1;
        let json = {
          page:this.page,
          decorate_id: this.page_id || this.$store.state.temp.item.id,
          component_id: this.id,
          component_key: 'U_unionCps'
        }
        $http
        .post(
          "home-page.get-decorate-page",
          json,'loading')
        .then((response)=> {
          this.isLoadMore = true;
          if (response.result === 1) {
            let res = response.data;
            let list = res?.data;
            this.datas.list.data =this.datas.list.data.concat(list);//数组拼接
            if(this.datas.get_style == "1") { //装修自动获取
              if(this.datas.list.data.length > this.datas.get_number) {
                this.datas.list.data.splice(this.datas.get_number, this.datas.list.data.length-this.datas.get_number);
                this.isLoadMore = false;
              }
            }
            if(this.page >= this.total_page) {
              this.isLoadMore = false;
            }
          } else {
            this.query.page = this.query.page - 1;
            this.isLoadMore = false;
          }
        },
        function(response) {
          console.error(response);
          // error callback
        });
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.setListData();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
.loadMore {
  width: 100%;
  // padding:10px 0 0 0;
  cursor: pointer;
  text-align: center;
  clear: both;
}
.subplatform-pane {
  padding:0.625rem;
  .subplatform-box {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    justify-content: space-between;
    .active-border-color {
      border: 4rpx solid #29ba9c;
    }

    .name-pane {
      width: calc(50% - 0.375rem);
      background: #fff;
      border-radius: 0.625rem;
      margin:0 0 0.9375rem 0;
      padding:0 0 0.625rem 0;
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      // justify-content: space-between;
      align-items: center;
      cursor: pointer;
      overflow: hidden;

      .bg-img {
        width:100%;
        height: 8.125rem;
        // width: 336rpx;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        // position: absolute;
        // right: -68rpx;
        // top: -36rpx;
        // z-index: -1;
      }

      .icon-img {
        width: 100px;
        height: 100px;
        margin: 0;
      }
      .subplatform-title {
        width:100%;
        text-align: left;
        box-sizing: border-box;
        padding:0.3125rem 0.625rem 0 0.625rem;
        display: inline-block;
      }
      .name {
        font-size: 0.875rem;
        font-weight: 500;
        line-height: 1.25rem;
        color: #3B3B4A;
        vertical-align:top;
      }

      .tip-name {
        font-size: 0.6875rem;
        line-height: 0.6875rem;
        border-radius: 0.25rem;
        background-color: #FBA800;
        padding:0.1875rem;
        font-weight: 400;
        color: #FFFFFF;
        margin:0 0.3125rem 0 0;
      }
    }
  }
}
</style>